import { FC, useState } from "react";

interface Props {}
const Index: FC<Props> = () => {
  // 1 useState或者说 所有的hooks仅触发1次
  // 2 setNum 必须方法放到中  导致死循环
  // 3 每次setNum函数本身都会重新触发
  // 4 setNum底层是浅比较    仅比较对象是否是一个地址   是-则【直接傻瓜式理解为数据一样】不更新， 否-数据不一样重新渲染函数

  console.log(11111);
  const [num, setNum] = useState(0);
  const [arr, setArr] = useState([11, 22, 33]);
  console.log(22222);

  const addData = () => {
    arr.push(44);
    //   setArr(arr); // TODO 脚下留心  底层浅比较  arr还是一个地址
    setArr([...arr]);
  };

  return (
    <fieldset>
      <legend>02-函数组件状态和事件</legend>
      <h1>{num}</h1>
      <button onClick={() => setNum(num + 1)}>+1</button>

      <h1>{arr}</h1>
      <button onClick={addData}>追加一条数据</button>
    </fieldset>
  );
};

export default Index;
